<!--
 * @Description: 
 * @Author: ljl
 * @Date: 2024-11-13 20:07:44
 * @LastEditors: rendc
 * @LastEditTime: 2024-11-15 17:03:54
-->
<template>
    <div class="main">        
        <div class="divLeft">
            <p>登录</p>
            <p>LOG ON</p>
        </div>

        <div class="divCenter">
            <form action="">
                <div>
                    <label>用户名:</label>
                    <input class="username" v-model="form.username" placeholder="请输入账号" name="username">
                </div>
                <div>
                    <label>密 码:</label>
                    <input class="password" v-model="form.password" placeholder="请输入密码" name="password">
                </div>
                <div class="butt">
                    <el-button type="submit" :loading="loading" @click="handleLogin">登录</el-button>
                </div>
            </form>
        </div>
        <!-- 右侧 -->
        <div class="divRight">
            <p>没有账号？<a href="Register.vue">立即注册</a></p>    
        </div>
        
    </div>
</template>
<script setup>
import { ref } from 'vue'
// 定义响应式表单数据
const form = ref({
  username: '',
  password: ''
});
const handleLogin = () => {
    // 这里的条件判断等代码逻辑要确保语法正确
    if (form.value.username === 'admin' && form.value.password === '123') {
        alert('登录成功');
    } else {
        alert('账号或密码错误，请重新输入');
    }
};

</script>
<style scoped>
/* 覆盖全局默认样式 */
* {
    /* 去掉默认margin padding */
    margin: 0;
    padding: 0;
    /* 更改盒子模型 */
    box-sizing: border-box;
}
.main{
    width: 900px;
    height: 300px;
    border: 8px solid orange;
    border-radius: 20px;
    margin: auto;
    background-color: white;
    text-align: center;
}
.divLeft{
    float: left;
    width: 25%;
    padding-top: 20px;
    padding-left: 20px;
}
.divLeft>p:first-child{
    color: #ffd026;
    font-size: 20px;
}
.divLeft>p:last-child{
    color: #a6a6a6;
    font-size: 20px;
}
.divCenter{
    float: left;
    width: calc(100% - 25% - 25%);
    padding: 60px 25px;
}
div {
    margin-bottom: 15px;
}
label {
    display: inline-block;
    width: 100px;
    font-weight: bold;
}
.username,
.password {
    width: 250px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.forInt{
    width: 140px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#imgCode{
    height: 32px;
    /* 垂直居中 */
    vertical-align: middle;
}
.butt{
    text-align: center;
}
button{
    padding: 10px 20px;
    background-color: #007bff;
    border: 1px solid rgb(248, 242, 242);
    border-radius: 20px;
}
.divRight{
    float: right;
    width: 25%;
    padding-top: 15px;
    padding-right: 15px;
}
.divRight>p{
    font-size: 15px;
    color: #a6a6a6;
    text-align: right;
}
.divRight p a{
    color: pink;
}
</style>